<template>
  <header>
    空间特征配准软件
  </header>
  <main>
    <div class="toolbar">
      <div style="color: #B4C0CC; font-size: 20px">选择算法：</div>
      <div class="btn-group">
        <div v-for="(item, index) in btns" :key="index" @click="activeIndex = index">
          <button :class="{ active: activeIndex === index }">{{ item.text }}</button>
        </div>
      </div>
      <div class="btn-run" @click="runAlgorithm">
        执行<img src="./assets/right-arrow.svg" style="margin-left: 8px" />
      </div>
    </div>
    <TestPage></TestPage>
  </main>
</template>

<script setup lang="ts">
import service from './service';
import TestPage from '@/components/TestPage.vue';
import { ref } from 'vue';

const btns = [{ text: '光流算法' }, { 'text': '多尺度' }, { 'text': '强化学习' }];

const activeIndex = ref(1);

async function runAlgorithm() {
  const res = await service.post('/algorithm/run', { algorithm: btns[activeIndex.value].text });
  console.log(res.data);
}

</script>
<style scoped>
header {
  margin-bottom: 10px;
  height: 78px;
  background-image: url(./assets/header-bg.png);
  background-size: 100% 100%;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  line-height: 78px;
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px dashed #1FC6FF;
}

.toolbar {
  display: flex;
  align-items: center;
}

.btn-group {
  display: flex;
  align-items: center;
  height: 100%;
}

.btn-group div {
  width: 100px;
  height: 52px;
  font-size: 16px;
  background-image: url(./assets/button-bg.png);
  padding: 5px;
  margin-right: 10px;
}

.btn-group div button {
  height: 42px;
  width: 90px;
  font-size: 16px;
  color: #1FC6FF;
  background-color: #0D242F;
  border: 1px solid #1FC6FF;
  cursor: pointer;
}

.btn-group div button.active {
  background-color: rgba(31, 198, 255, 0.3);
  color: #fff;
  font-weight: bold;
}

.btn-group div button:hover {
  background-color: rgba(31, 198, 255, 0.3);
  color: #fff;
  font-weight: bold;
}

.btn-run {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  background-image: url(./assets/run-bg.png);
  margin-left: 10px;
  cursor: pointer;
}
</style>
